<template>
    	<section class="border padding">
		<el-row>
            <mdp-select item-code="categoryType" v-model="filters.categoryType" placeholder="主题"/>

			<el-input v-model="filters.pid" style="width: 15%;" placeholder="上级编号查询 输入 *字符* >10 <9 等" clearable title="支持>、<、 >=、<=、!=、*字符*、$IS NULL、$IN 1,2,3、$between 1,5等操作符"/>
			<el-input v-model="filters.id" style="width: 15%;" placeholder="编号查询 输入 *字符* >10 <9 等" clearable title="支持>、<、 >=、<=、!=、*字符*、$IS NULL、$IN 1,2,3、$between 1,5等操作符"/>
            <el-input v-model="filters.name" style="width: 15%;" placeholder="名称查询 输入 *字符* >10 <9 等" clearable title="支持>、<、 >=、<=、!=、*字符*、$IS NULL、$IN 1,2,3、$between 1,5等操作符"/>
            <el-button v-loading="load.list" :disabled="load.list==true" @click="searchTableDatas()" icon="el-icon-search" type="primary">查询</el-button>
			<span style="float:right;" v-if="currOpType=='mng'">
                <el-button :disabled="disabledJudge('addBtn') || !checkBtnQx('addBtn',menuDefId) " type="primary" @click="openForm({parentOpType:currOpType,subOpType:'add',formData:addForm,title:'新增'})" icon="el-icon-plus"/>
                <el-button :disabled="disabledJudge('delBtn') || !checkBtnQx('delBtn',menuDefId) || this.sels.length===0 || load.del==true" type="danger" v-loading="load.del" @click="batchDel" icon="el-icon-delete"/>
            </span>
            <span style="float:right;" v-else-if="currOpType=='select' &&  this.multiple==true">
                <el-button :disabled="disabledJudge('selectBtn') || this.sels.length===0" type="primary" @click="selectListConfirm" icon="el-icon-check"/>
            </span>
		</el-row>
		<el-row>  
            <mdp-hi-query :column-configs="columnConfigs" v-model="hiQueryParams" @change="onHiQueryParamsChange"/>
            <el-button type="text" icon="el-icon-zoom-out" @click="searchReset()">重置查询</el-button>&nbsp;&nbsp;&nbsp;
            <span v-for="(item ,index) in parentList" :key="index">
                <el-tag   @close="clearParent(item,index)" closable @click="clickParent(item,index)">{{item.name}}</el-tag>/
            </span>
            &nbsp;&nbsp;&nbsp;
		</el-row>
		<el-row>
			<!--列表 Category 档案类目-->
			<el-table :ref="refId+'Table'" :height="100"  row-key="id" v-adaptive="{bottomOffset: bottomOffset}" :data="treeDataCpd" :tree-props="{children: 'children',  label: 'name',id:'id'}" @sort-change="sortChange" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
				<el-table-column  type="selection" width="55" show-overflow-tooltip fixed="left" v-if="currOpType=='mng' || this.multiple==true"></el-table-column>
 				<el-table-column prop="id" label="分类编号" min-width="120" show-overflow-tooltip  fixed="left" col-type="String" v-if="showCol('id')"></el-table-column>
				
                 <el-table-column prop="name"  label="分类名称" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('name')">
				    <template slot-scope="scope">
                            <mdp-input show-style="tag" v-model="scope.row.name" :maxlength="50" @change="editSomeFields(scope.row,'name',$event)" :disabled="disabledJudge('name')"/>
				    </template>
				</el-table-column>
                <el-table-column prop="categoryType"  label="主题" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('categoryType')">
				    <template slot-scope="scope">
                            <mdp-select item-code="categoryType" show-style="tag" v-model="scope.row.categoryType" :maxlength="1" @change="editSomeFields(scope.row,'categoryType',$event)" :disabled="disabledJudge('categoryType')||true"/>
				    </template>
				</el-table-column>
				<el-table-column prop="pid"  label="上级分类" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('pid')">
				    <template slot-scope="scope">
                            <mdp-input show-style="tag" v-model="scope.row.pid" :maxlength="50" @change="editSomeFields(scope.row,'pid',$event)" :disabled="disabledJudge('pid')||true"/>
				    </template>
				</el-table-column>
				<el-table-column prop="sortOrder"  label="分类排序" min-width="120" show-overflow-tooltip col-type="BigDecimal" v-if="showCol('sortOrder')">
				    <template slot-scope="scope">
                            <mdp-input show-style="tag" v-model="scope.row.sortOrder" @change="editSomeFields(scope.row,'sortOrder',$event)" :maxlength="5" :disabled="disabledJudge('sortOrder')"/>
				    </template>
				</el-table-column>
				<el-table-column prop="isShow"  label="是否显示" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('isShow')">
				    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.isShow" true-label="1" false-label="0" @change="editSomeFields(scope.row,'isShow',$event)" :disabled="disabledJudge('isShow')"></el-checkbox> 

 				    </template>
				</el-table-column>
				<el-table-column prop="limitType"  label="文章限制" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('limitType')">
				    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.limitType" auto-complete="off"  true-label="1" false-label="2" @change="editSomeFields(scope.row,'limitType',$event)" :disabled="disabledJudge('limitType')"></el-checkbox>
				    </template>
				</el-table-column>
				<el-table-column prop="isLeaf"  label="是否叶子节点" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('isLeaf')">
				    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.isLeaf" true-label="1" false-label="0" @change="editSomeFields(scope.row,'isLeaf',$event)" :disabled="disabledJudge('isLeaf')"></el-checkbox> 

 				    </template>
				</el-table-column>
				<el-table-column prop="isAuth"  label="文章审核" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('isAuth')">
				    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.isAuth" true-label="1" false-label="0" @change="editSomeFields(scope.row,'isAuth',$event)" :disabled="disabledJudge('isAuth')"></el-checkbox> 

 				    </template>
				</el-table-column>
				<el-table-column prop="branchId"  label="机构编号" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('branchId')">
				    <template slot-scope="scope">
                            <mdp-input show-style="tag" v-model="scope.row.branchId" :maxlength="50" @change="editSomeFields(scope.row,'branchId',$event)" :disabled="disabledJudge('branchId')||true"/>
				    </template>
				</el-table-column>
				<el-table-column prop="imageUrls"  label="图片列表逗号分割" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('imageUrls')">
				    <template slot-scope="scope">
                            <mdp-input show-style="tag" v-model="scope.row.imageUrls" :maxlength="1024" @change="editSomeFields(scope.row,'imageUrls',$event)" :disabled="disabledJudge('imageUrls')"/>
				    </template>
				</el-table-column>
				<el-table-column prop="paths"  label="上级分类路径" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('paths')">
				    <template slot-scope="scope">
                            <mdp-input show-style="tag" v-model="scope.row.paths" :maxlength="255" @change="editSomeFields(scope.row,'paths',$event)" :disabled="disabledJudge('paths')||true"/>
				    </template>
				</el-table-column>
				<el-table-column label="操作" :width="currOpType=='mng'?380:180" fixed="right">
				    <template slot="header" slot-scope="scope">
                        <el-button icon="el-icon-download" @click="export2Excel()">导出</el-button>
                        <mdp-table-configs :column-configs="columnConfigs" v-model="checkedColumns"/>
                    </template>
				    <template scope="scope" v-if="currOpType=='mng'"  >
                        <el-button @click="searchSub(scope.row)" icon="el-icon-search">查子分类</el-button>
				        <el-button @click="openForm({parentOpType:currOpType,subOpType:'addSub',formData:scope.row,title:'新增子分类'})" icon="el-icon-plus"></el-button>
				        
				        <el-button :disabled="disabledJudge('editBtn') || !checkBtnQx('editBtn',menuDefId) " type="primary" @click="openForm({parentOpType:currOpType,subOpType:'edit',formData:scope.row,title:'修改'})" icon="el-icon-edit" title="修改一条数据"/>
				        <el-button :disabled="disabledJudge('addBtn') || !checkBtnQx('addBtn',menuDefId) " type="success" @click="copy(scope.row)" icon="el-icon-document-copy" title="拷贝并新增一条除了主键不一样其它都一样的数据"/>
				        <el-button :disabled="disabledJudge('delBtn') || !checkBtnQx('delBtn',menuDefId) " type="danger" @click="handleDel(scope.row,scope.$index)" icon="el-icon-delete"  title="删除一条数据"/>
				    </template>

				    <template scope="scope" v-else-if="currOpType=='list'" >
				        <el-button   type="primary" @click="openForm({parentOpType:currOpType,subOpType:'detail',formData:scope.row})" icon="el-icon-view"/>
 				    </template>

				    <template scope="scope" v-else-if="currOpType=='select' && this.multiple!=true" >
				        <el-button   type="primary" @click="selectConfirm(scope.row)" icon="el-icon-check"/>
 				    </template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination
				layout="slot,total, sizes, prev, next,pager,jumper"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:page-sizes="[10,20, 50, 100, 500]"
				:current-page="pageInfo.pageNum"
				:page-size="pageInfo.pageSize"
				:total="pageInfo.total"
				style="float:right;"
			> 
			</el-pagination>
		</el-row>
		<el-row>
			<!--新增修改明细 Category 档案类目界面-->
            <mdp-dialog :ref="refId+'FormDialog'">
                <template v-slot="{visible,data,dialog}">
                     <category-form :ref="refId+'Form'" :visible="visible" :parent-op-type="currOpType" :sub-op-type="data.subOpType" :form-data="data.formData" @close="onFormClose" @submit="afterFormSubmit" @fields-change="afterEditSomeFields"/>
                </template>
            </mdp-dialog>
 	    </el-row>
	</section>
</template>

<script>

import { MdpTableMixin } from '@/components/mdp-ui/mixin/MdpTableMixin.js';
import * as CategoryApi from '@/api/mdp/arc/pub/category';
import  CategoryForm from './Form';//新增修改明细界面
import { mapGetters } from 'vuex'

export default {
    name:'categoryMng',
    mixins:[MdpTableMixin],
    components: {
        CategoryForm,
    },
    computed: {
        treeDataCpd() {
            var datas= this.translateDataToTree(this.tableDatas); 
            return datas; 
        },
    },
    watch:{
    },
    data() {
        return {
            menuDefId:'',//menu_def.id 菜单表菜单编号，用于按钮权限判断
            menuDefName:'档案类目',//menu_def.name 功能名称，用于导出excel等文件名
            refId:'category',//引用编号，<table :ref="refId+'Table'"> <form :ref="refId+'Form'">
            pkNames:["id"],//表格主键的java属性名称，驼峰命名，默认为id,支持多主键
            currOpType:'mng',//表格 mng-综合管理具有最大权限，所有按钮可动、detail-只看不能操作
            filters:{//查询参数

            },
            defaultFilters:{//默认查询参数,第一次打开界面的时候用到，恢复默认值的时候用到

            },

            defaultCheckColumnNum:8,//默认展示的表格列数，前8列

            //增删改查(含批量)接口
            apis:{
                list: CategoryApi.listCategory,
                add: CategoryApi.addCategory,
                del: CategoryApi.delCategory,
                edit: CategoryApi.editCategory,
                editSomeFields: CategoryApi.editSomeFieldsCategory,
                batchAdd: CategoryApi.batchAddCategory,
                batchDel: CategoryApi.batchDelCategory,
                batchEdit: CategoryApi.batchEditCategory,
            }, 
            parent:{},
            parentList:[],
        }
    },
    methods: {
         //页面初始化需要配置的特殊逻辑写这里
          initCurrData(){
             this.searchTableDatas();
          },

          /**
           * 检查参数是否满足调用后台接口的条件
           *
           * @param params 提交给后台的参数池,map类型
           * @returns true / false
           */
          preQueryParamCheck(params){
              return true;
          },

          //页面数据加载完后需要对数据进行加工处理的
          afterList(res,isOk,apiName){

          },

          /**
           * 对修改的字段进行判断，返回false ,将取消更新数据库
           * @param {*} row 当前选中的行
           * @param {*} fieldName 修改的字段名
           * @param {*} $event 修改后的值
           * @param {*} params 将要提交服务器的参数
           * @returns true/false 返回false ,将取消更新数据库
           */
          editSomeFieldsCheck(row,fieldName,$event,params){
              if(this.currOpType=='add'||this.currOpType=='detail'){
                  return false;
              }
              params[fieldName]=$event
              return true;
          },
           /**
           * 设置某个关键词、按钮、输入框禁用 disabledRules['addBtn']=false
           * 判断某个对象是否可编辑 this.disabledJudge('addBtn')==false
           */
          disabledRulesInit(disabledRules){

          },
         /**
          * 打开某个子页面
          */
        openForm(res){
            let {parentOpType,formRefId,subOpType,formData} = res
            if(!formRefId){
                formRefId=this.getRefId()+"FormDialog"
            }
            if(!parentOpType){
                parentOpType=this.currOpType
            }
            var form=this.$refs[formRefId]
            if(form){
                if(subOpType=='addSub'){
                    res.formData.pid=res.formData.id
                    res.formData.id=''
                }else{
                    if(subOpType=='add'){
                        res.formData.pid='0'
                    }
                }
                res.parentOpType=parentOpType
                res.formRefId=formRefId
                form.open(res);
            }else{

            }

        },
        searchSub(parent){
            this.editForm = Object.assign({}, parent);
            this.parent=parent 
            this.filters.pid=parent.id
            this.parentList.push(parent); 
            this.searchTableDatas()
        },
        clearParent(parent,index){
            if(index==0){
                this.parent=null;
                this.filters.pid=''
                this.parentList=[]
            }else{
                this.parent=this.parentList[index-1];
                this.parentList.splice(index,this.parentList.length-index) 
                this.filters.pid=this.parent.id
            } 
            this.searchTableDatas()
        }, 
        clickParent(parent,index){
            this.parent=parent;
            this.parentList.splice(index+1,this.parentList.length-index-1) 
            this.searchTableDatas()
        }, 
        
        translateDataToTree(data2) {
            var data=JSON.parse(JSON.stringify(data2));

            let parents = data.filter(value =>{

                //如果我的上级为空，则我是最上级
                if(value.pid == 'undefined' || value.pid == null  || value.pid == ''|| value.pid=='0'){
                    return true;

                    //如果我的上级不在列表中，我作为最上级
                }else if(data.some(i=>value.pid==i.id)){
                    return false;
                }else {
                    return true
                }

            })
            let children = data.filter(value =>{
                if(data.some(i=>value.pid==i.id)){
                    return true;
                }else{
                    return false;
                }
            })
            let translator = (parents, children) => {
                parents.forEach((parent) => {
                    children.forEach((current, index) => {
                        if (current.pid === parent.id) {
                            let temp = JSON.parse(JSON.stringify(children))
                            temp.splice(index, 1)
                            translator([current], temp)
                            typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
                        }
                    }
                    )
                }
                )
            }

            translator(parents, children)

            return parents
        },
    },
    mounted() {

    }
}

</script>

<style scoped>
</style>